<template>
	<view class="header">
		<u-navbar :title="title" :background="{ background: background }" :is-back="isBack" :is-fixed="isFixed"
			back-icon-color="auto" :border-bottom="borderBottom" @click-right="onClickRight" :title-color="textColor"
			@click-left="onClickLeft" @click.native.stop="handelSearch">
			<view class="slot-wrap">
				<view class="main" :style="{width:icon=='long'?'100%':'90%'}">
					<image class="nav-image" :src="require('@/assets/tg.png')" mode=""></image>
					<text class="title">天罡CRM 控制台系统</text>
				</view>
			</view>
		</u-navbar>
	</view>
</template>

<script>
	export default {
		name: "header-search",
		props: {
			title: {
				type: String,
				default: "",
			},
			isBack: {
				type: Boolean,
				default: false,
			},
			isFixed: {
				type: Boolean,
				default: true,
			},
			background: {
				type: String,
				default: "",
			},
			textColor: {
				type: String,
				default: "#323233",
			},
			borderBottom: {
				type: Boolean,
				default: true,
			},
			icon: {
				type: String,
				default: "...",
			},
			inputColor: {
				type: String,
				default: '#f6f6f6'
			}
		},
		data() {
			return {
				searchText: ''
			};
		},
		computed: {},
		watch: {},
		created() {},
		methods: {
			// 返回点击
			onClickLeft() {
				uni.navigateBack({
					delta: 1,
				});
			},
			onClickRight() {},
			//点击跳转到详情
			handelSearch() {
				let vm = this;
				vm.$emit("handelHeaderSearch", vm.searchText);
			},
			//获取输入框的值
			search(val) {
				this.$emit('handleSearch', val.detail.value)
			},
			// 搜索框确认事件
			inputConfirm() {
				this.$emit('handleConfirm')
			},
			productshopListShow() {
				this.$emit('productshopListShow');
			},
			shopListChange() {
				this.$emit('shopListChange');
			}
		},
	};
</script>

<style scoped lang='scss'>
	.nav-image {
		height: 100%;
		width: 80px;
	}

	.title {
		margin-left: 10px;
	}

	.slot-wrap {
		width: 100%;
		text-align: center;
		font-weight: bold;
		display: flex;
		align-items: center;

		/* 
  justify-content: space-between;
   */
		/* padding: 0px 30upx; */
		.main {
			height: 20px;
			font-size: 15px;
			border-radius: 30upx;
			display: flex;
			justify-content: center;
		}

		.cancel {
			display: flex;
			align-items: center;

			text {
				width: 50upx;
				font-size: 26upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				line-height: 88upx;
				white-space: nowrap;
			}
		}

		.search {
			margin-left: 20upx;
			width: 134upx;
			height: 54upx;
			line-height: 54upx;
			background: #FFFFFF;
			border: 1upx solid #EEEEEE;
			border-radius: 27upx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			view {

				// width:50%;
				// height: 100%;
				// text-align: center;
				image {
					// vertical-align: middle;
					text-align: center;


					&:first-child {
						width: 26upx;
						height: 6upx;
					}

					&:last-child {
						width: 20upx;
						height: 20upx;
					}
				}
			}

		}
	}
</style>